<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="800px"
      @closed="resetForm('form')"
    >
      <div>
        <el-form ref="form" :rules="rules" :model="form" label-width="100px">
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="计划名称" prop="name">
                <el-input v-model.trim="form.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="课程" prop="courseId">
                <CourseSelect
                  v-if="dialogVisible"
                  courseType="6"
                  @emit="handleCourseId"
                  :defaultValue="form.courseId"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="班次" prop="classId">
                <ClassroomEduSelect
                  @emit="handleClassId"
                  :defaultValue="form.classId"
                />
              </el-form-item>
            </el-col>
            <!-- <el-col :span="12">
              <el-form-item label="理论课时" prop="hour1">
                <el-input-number
                  v-model="form.hour1"
                  :min="1"
                  :max="1000"
                  size="medium"
                  label="理论课时"
                ></el-input-number>
              </el-form-item>
            </el-col> -->
            <!-- <el-col :span="12">
              <el-form-item label="实验课时" prop="hour2">
                <el-input-number
                  v-model="form.hour2"
                  :min="1"
                  :max="1000"
                  size="medium"
                  label="理论课时"
                ></el-input-number>
              </el-form-item>
            </el-col> -->
            <!-- <el-col :span="12">
              <el-form-item label="总学时" prop="sumHours">
                <el-input-number
                  v-model="form.sumHours"
                  :min="1"
                  :max="1000"
                  size="medium"
                  label="理论课时"
                ></el-input-number>
              </el-form-item>
            </el-col> -->
            <!-- <el-col :span="12">
              <el-form-item label="周次" prop="weeks">
                <el-input-number
                  v-model="form.weeks"
                  :min="1"
                  :max="1000"
                  size="medium"
                  label="理论课时"
                ></el-input-number>
              </el-form-item>
            </el-col> -->
            <el-col :span="24">
              <el-form-item label="排序" prop="orderBy">
                <el-input-number
                  v-model="form.orderBy"
                  :min="1"
                  :max="1000"
                  size="medium"
                  label="排序"
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="参考教材" prop="textbook">
                <el-input
                  type="textarea"
                  placeholder="请输入参考教材内容"
                  v-model="form.textbook"
                  maxlength="100"
                  show-word-limit
                >
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="custom" v-preventReClick @click="submitForm('form')"
          >提 交</el-button
        >
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  components: {
    ClassroomEduSelect: () =>
      import('@/components/dataSelect/classroomEduSelect'),
    CourseSelect: () => import('@/components/dataSelect/courseSelect'),
  },
  data() {
    return {
      title: '新增',
      dialogVisible: false,
      form: {
        classId: '', //班次id
        courseId: '', //课程id
        courseName: '', //课程名称
        hour1: '', //理论课时
        hour2: '', //实验课时
        hour3: '', //其他课时
        hour4: '', //其他课时
        hour5: '', //其他课时
        name: '', //计划名称
        orderBy: 10, //排序
        status: '1', //状态；1-未开始，2-进行中，3-已完结
        sumHours: '', //总学时
        teacherId: '', //任课教师
        textbook: '', //教材
        weeks: '', //周数
      },
      rules: {
        name: [{ required: true, message: '请输入计划名称', trigger: 'blur' }],
      },
    }
  },
  mounted() {
    this.$bus.$on('showDialogLessonAdd', this.init)
  },
  beforeDestroy() {
    this.$bus.$off('showDialogLessonAdd')
  },
  methods: {
    //显示弹窗
    init(row) {
      if (row) {
        this.form = { ...this.form, ...row }
        this.$set(this.form, 'id', row.id)
      } else {
        this.form = this.$options.data().form
        this.$delete(this.form, 'id')
      }
      this.title = row ? '编辑' : '新增'
      this.dialogVisible = true
    },
    submitForm(form) {
      let { userId } = this.$store.getters
      this.form.teacherId = userId
      this.$refs[form].validate(async (valid) => {
        if (valid) {
          let dispatchType =
            this.title == '新增' ? 'addEduLesson' : 'updateEduLesson'
          await this.$store.dispatch(dispatchType, this.form)
          this.successMsg('操作成功')
          this.$bus.$emit('refreshLessonList')
          this.dialogVisible = false
        }
      })
    },
    resetForm(form) {
      this.$refs[form].resetFields()
    },
    handleClassId(v) {
      this.form.classId = v || ''
    },
    handleCourseId(v, obj) {
      this.form.courseId = v || ''
      this.form.courseName = obj.title || ''
    },
  },
}
</script>